<!--（一）Android部分：-->

<!--布局代码：-->

<!--<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"-->
    <!--xmlns:tools="http://schemas.android.com/tools"-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="match_parent"-->
    <!--android:focusable="true"-->
    <!--android:focusableInTouchMode="true"-->
    <!--android:orientation="vertical"-->
    <!--android:padding="8dp"-->
    <!--tools:context=".MainActivity">-->

    <!--<LinearLayout-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content">-->

        <!--<EditText-->
            <!--android:id="@+id/input_et"-->
            <!--android:layout_width="0dp"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:singleLine="true"-->
            <!--android:layout_weight="1"-->
            <!--android:hint="请输入信息" />-->

        <!--<Button-->
            <!--android:text="Java调用JS"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:onClick="sendInfoToJs" />-->
    <!--</LinearLayout>-->

    <!--<WebView-->
        <!--android:id="@+id/webView"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent" />-->

<!--</LinearLayout>-->
<!--Activity代码：-->
<!--/**-->
 <!--* Android WebView 与 Javascript 交互。-->
 <!--*/-->
<!--public class MainActivity extends ActionBarActivity {-->
    <!--private WebView webView;-->

    <!--@SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})-->
    <!--@Override-->
    <!--protected void onCreate(Bundle savedInstanceState) {-->
        <!--super.onCreate(savedInstanceState);-->
        <!--setContentView(R.layout.activity_main);-->

        <!--webView = (WebView) findViewById(R.id.webView);-->

        <!--webView.setVerticalScrollbarOverlay(true);-->
        <!--//设置WebView支持JavaScript-->
        <!--webView.getSettings().setJavaScriptEnabled(true);-->

        <!--String url = "http://192.168.1.27/js_17_android_webview.html";-->
        <!--webView.loadUrl(url);-->

        <!--//在js中调用本地java方法-->
        <!--webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");-->

        <!--//添加客户端支持-->
        <!--webView.setWebChromeClient(new WebChromeClient());-->
    <!--}-->

    private class JsInterface {
        private Context mContext;

        public JsInterface(Context context) {
            this.mContext = context;
        }

        //在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
        @JavascriptInterface
        public void showInfoFromJs(String name) {
            Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
        }
    }

    <!--//在java中调用js代码-->
    <!--public void sendInfoToJs(View view) {-->
        <!--String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();-->
        <!--//调用js中的函数：showInfoFromJava(msg)-->
        <!--webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");-->
    <!--}-->
<!--}-->
<!--（二）网页代码：-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>Android WebView 与 Javascript 交互</title>
<head>
  <style>
  body {background-color:#e6e6e6}

  .rect
  {
    color:white;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    width:100px;
    padding:6px;
    background-color:#98bf21;
    text-decoration:none;
    text-align:center;
    border:none;
    cursor:pointer;
  }

  .inputStyle {font-size:16px;padding:6px}
  </style>
</head>

<body>
  <p>测试Android WebView 与 Javascript 交互</p>
  <input id = "name_input" class = "inputStyle" type="text"/>
  <a class = "rect" onclick="sendInfoToJava()">JS调用Java</a>

  <script>
  function sendInfoToJava(){
    //调用android程序中的方法，并传递参数
    var name = document.getElementById("name_input").value;
    window.AndroidWebView.showInfoFromJs(name);
  }

  //在android代码中调用此方法
  function showInfoFromJava(msg){
    alert("来自客户端的信息："+msg);
  }
  </script>

</body>
</html>